<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
	Tree View <small>jquery plugins overview</small>
</h3>
<div class="page-bar">
	<ul class="page-breadcrumb">
		<li>
			<i class="fa fa-home"></i>
			<a href="#/dashboard.html">Home</a>
			<i class="fa fa-angle-right"></i>
		</li>
		<li>
			<a href="#/tree">jQuery Plugins</a>
		</li>
		<li>
			<a href="#/tree">Tree View</a>
		</li>
	</ul>
	<div class="page-toolbar">
		<div class="btn-group pull-right">
			<button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" dropdown-menu-hover data-delay="1000" data-close-others="true">
			Actions <i class="fa fa-angle-down"></i>
			</button>
			<ul class="dropdown-menu pull-right" role="menu">
				<li>
					<a href="#">
					<i class="icon-user"></i> New User </a>
				</li>
				<li>
					<a href="#">
					<i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
					</a>
				</li>
				<li>
					<a href="#">
					<i class="icon-basket"></i> New order </a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">
					<i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
					</a>
				</li>
				<li>
					<a href="#">
					<i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN MAIN CONTENT -->
<div class="row">
	<div class="col-md-6">
		<div class="portlet light bordered">
			<div class="portlet-title">
				<div class="caption">
					<i class="fa fa-cogs font-green-sharp"></i>
					<span class="caption-subject font-green-sharp bold uppercase">Default Tree</span>
				</div>
				<div class="tools">
					<a href="javascript:;" class="collapse">
					</a>
					<a href="#portlet-config" data-toggle="modal" class="config">
					</a>
					<a href="javascript:;" class="reload">
					</a>
					<a href="javascript:;" class="remove">
					</a>
				</div>
			</div>
			<div class="portlet-body">
				<div id="tree_1" class="tree-demo">
					<ul>
						<li>
							Root node 1
							<ul>
								<li data-jstree='{ "selected" : true }'>
									<a href="javascript:;">
									Initially selected </a>
								</li>
								<li data-jstree='{ "icon" : "fa fa-briefcase icon-state-success " }'>
									custom icon URL
								</li>
								<li data-jstree='{ "opened" : true }'>
									initially open
									<ul>
										<li data-jstree='{ "disabled" : true }'>
											Disabled Node
										</li>
										<li data-jstree='{ "type" : "file" }'>
											Another node
										</li>
									</ul>
								</li>
								<li data-jstree='{ "icon" : "fa fa-warning icon-state-danger" }'>
									Custom icon class (bootstrap)
								</li>
							</ul>
						</li>
						<li data-jstree='{ "type" : "file" }'>
							<a href="http://www.jstree.com">
							Clickanle link node </a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="portlet light bordered">
			<div class="portlet-title">
				<div class="caption">
					<i class="fa fa-cogs font-green-sharp"></i>
					<span class="caption-subject font-green-sharp bold uppercase">Checkable Tree</span>
				</div>
				<div class="tools">
					<a href="javascript:;" class="collapse">
					</a>
					<a href="#portlet-config" data-toggle="modal" class="config">
					</a>
					<a href="javascript:;" class="reload">
					</a>
					<a href="javascript:;" class="remove">
					</a>
				</div>
			</div>
			<div class="portlet-body">
				<div id="tree_2" class="tree-demo">
				</div>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-6">
		<div class="portlet light bordered">
			<div class="portlet-title">
				<div class="caption">
					<i class="fa fa-cogs font-green-sharp"></i>
					<span class="caption-subject font-green-sharp bold uppercase">Contextual Menu with Drag & Drop</span>
				</div>
				<div class="tools">
					<a href="javascript:;" class="collapse">
					</a>
					<a href="#portlet-config" data-toggle="modal" class="config">
					</a>
					<a href="javascript:;" class="reload">
					</a>
					<a href="javascript:;" class="remove">
					</a>
				</div>
			</div>
			<div class="portlet-body">
				<div id="tree_3" class="tree-demo">
				</div>
				<div class="alert alert-success no-margin margin-top-10">
					Note! Opened and selected nodes will be saved in the user's browser, so when returning to the same tree the previous state will be restored.
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="portlet light bordered">
			<div class="portlet-title">
				<div class="caption">
					<i class="fa fa-cogs font-green-sharp"></i>
					<span class="caption-subject font-green-sharp bold uppercase">Ajax Tree with Drag & Drop</span>
				</div>
				<div class="tools">
					<a href="javascript:;" class="collapse">
					</a>
					<a href="#portlet-config" data-toggle="modal" class="config">
					</a>
					<a href="javascript:;" class="reload">
					</a>
					<a href="javascript:;" class="remove">
					</a>
				</div>
			</div>
			<div class="portlet-body">
				<div id="tree_4" class="tree-demo">
				</div>
				<div class="alert alert-info no-margin margin-top-10">
					Note! The tree nodes are loaded from demo/jstree_ajax_data.php via ajax.
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END MAIN CONTENT -->
<script>
	UITree.init(); // init todo page
</script>
